import React, { useState } from 'react';
import { NavBar, Input, Button, Toast } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import styles from './PhoneRecharge.module.css';

function PhoneRecharge() {
  const navigate = useNavigate();
  const [phoneNumber, setPhoneNumber] = useState('');
  const [selectedAmount, setSelectedAmount] = useState(10);

  const amounts = [10, 50, 100, 200, 500];

  const handleRecharge = () => {
    if (!phoneNumber) {
      Toast.show({
        content: '请输入手机号',
        position: 'center',
      });
      return;
    }
    Toast.show({
      content: `为${phoneNumber}充值${selectedAmount}元成功`,
      position: 'center',
    });
    setTimeout(() => {
      navigate('/cloud-payment');
    }, 1500);
  };

  return (
    <div className={styles.container}>
      <NavBar onBack={() => navigate('/cloud-payment')} className={styles.navBar}>
        充值
      </NavBar>
      
      <div className={styles.content}>
        <div className={styles.phoneSection}>
          <label className={styles.label}>手机号</label>
          <Input
            placeholder="请输入手机号"
            value={phoneNumber}
            onChange={setPhoneNumber}
            className={styles.phoneInput}
          />
        </div>

        <div className={styles.amountSection}>
          <h3 className={styles.sectionTitle}>请选择充值金额</h3>
          <div className={styles.amountGrid}>
            {amounts.map(amount => (
              <button
                key={amount}
                className={`${styles.amountButton} ${selectedAmount === amount ? styles.selected : ''}`}
                onClick={() => setSelectedAmount(amount)}
              >
                {amount}元
              </button>
            ))}
          </div>
        </div>

        <div className={styles.notice}>
          <p>注：</p>
          <p>本服务由XXX有限公司提供，充值后一般1-48小时到账，如充值未成功将会退还费用，充值失败可联系客服0000-0000</p>
        </div>

        <Button 
          block 
          color='primary' 
          size='large' 
          className={styles.confirmButton}
          onClick={handleRecharge}
        >
          确认充值
        </Button>
      </div>
    </div>
  );
}

export default PhoneRecharge;